<template>
  <div class="container" style="padding: 0px">
    <div class="overflowY" style="height: 300px;padding-right: 15px;" v-loading="loading">
      <!-- <div class="block  "> -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-expand="expand"
        @node-collapse="collapse"
        @current-change="handleCurrentChange"
        :default-expanded-keys="expandedKeys"
        :highlight-current="true"
        node-key="id"
        class="nodes-tree"
        :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
          </span>
      </el-tree>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
  import '@/styles/newstyle.scss'
  const store = require('store')

  export default {
    name: 'wfBizCategorySelect',
    data() {
      return {
        loading: false,
        expandedKeys: [],
        dappendVisible: false,
        queryArgs: {},
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        }
      }
    },
    props: ['asyncData'],
    created() {
      this.fetchData()
    },
    watch: {
      asyncData() { // 普通的watch监听通的watch监听
        this.fetchData()
        // console.log(this.asyncData)
      }
    },
    components: {
    },
    // 画面刚进入method
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.fetchData()
      })
    },
    mounted() {
      // this.handleReset()
    },
    methods: {
      fetchData() {
        this.loading = true
        this.$store.dispatch('WfBizCategoryTree', this.queryArgs).then(res => {
          this.treeData = res.data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      expand(data) {
        this.expandedKeys.push(data.id)
        store.set('orgExpandedKeys', this.expandedKeys)
        // console.log(data)
      },
      collapse() {
        this.expandedKeys.pop()
        store.set('orgExpandedKeys', this.expandedKeys)
        // console.log(this.expandedKeys)
      },
      handleCurrentChange(data, node) {
        //
        let args = {}
        args.bizCateId = data.data_id
        this.$emit('setBizCategory', args)
      }
    }
  }
</script>
<style scoped>

  .custom-tree-node .custom-tree-nodetit {
    /* color: red; */
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  .custom-tree-node .custom-tree-nodetit:hover{
    /* overflow: visible; */
    /* width:90px;
    display: inline-block; */
  }

  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:4px;
    margin-left: 4px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .minSize{
    padding:4px;
  }
  .height100{
    border-right: 1px solid #ccc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .span-title{
    float: left;
    line-height: 16px;
    border-left:4px solid #000;
    padding-left: 10px;
    font-size: 16px;
    margin-top: 7px;
  }
  .myDialog{
    padding: 0px;
  }
</style>
